<template>
  <el-dialog v-model="dialogVisible">
    <video style="max-width:100%;" v-if="dialogImageData.type=='video'"
           :src="dialogImageUrl"
           controls
    />
    <img v-else style="max-width:100%;" :src="dialogImageUrl"/>
  </el-dialog>

  <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="220px">
    <el-row>
      <el-col
          :span="item.fenl24"
          v-for="(item, index) in formDefine"
          :key="index">
        <el-form-item
            :prop="item.biaodyz=='required'?item.zidmc:(item.biaodyz!=''||item.biaodyz!=''!=null)?item.zidmc:''"
            :label="item.biaot">
          <!--视频附件-->
          <div v-if="item.biaodkjlx == '9' && showSecond == false">
            <el-upload :disabled="disabled"
                :on-preview="handlePictureCardPreview"
                :on-success="handleSuccess(formData[item.zidmc],'video')"
                :file-list="formData[item.zidmc]"
                ::headers="uploadHeaders"
                accept="video/*"
                :action="uploadAction">
              <el-button type="primary">点击上传视频</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  {{ item.kongjsj }}
                </div>
              </template>
            </el-upload>
            <div class="info clearfix">
              <P>一、视频时长要求2 分钟以内</P>
              <P>二、视频格式要求：</P>
              <P>1、作品视频画质清晰（清晰度在 720p 以上）</P>
              <P>2、以横屏 16：9 为佳，音质完好</P>
              <P>3、格式为 MP4、AVI、M4V、MOV等主流视频格式</P>
              <P>4、单个视频文件大小不超过 500M</P>
              <P>三、视频内容要求：参赛作品视频围绕主要设计亮点展开，画面必须使用作品的实景图或实景拍摄素材，可采取“作品图轮播+字幕+旁白解说”的剪辑形式，可自主选择添加背景音乐。为了投票公平原则，视频片头片尾可出现作品名称，但参赛者不能在视频中出镜，视频全片不能出现参赛设计师姓名或参赛设计单位的字样或旁白。</P>
            </div>
          </div>
<!--          <div v-else>-->
<!--            <video-->
<!--                :src="formData[item.zidmc][0].url"-->
<!--                v-if="item.biaodkjlx == '9' && formData[item.zidmc].length > 0 && formData[item.zidmc][0].url !== null ? formData[item.zidmc][0].url : '' "-->
<!--                controls-->
<!--            />-->
<!--          </div>-->
          <!--上传附件-->
          <el-upload :class="{'no-upload':(this.menuName!='project2'&&this.menuName!='zuopxq')}"
              :on-preview="handleDownLoadFile"
              :on-success="handleSuccess(formData[item.zidmc],'file')"
              v-if="item.biaodkjlx == '6'"
              :file-list="formData[item.zidmc]"
              ::headers="uploadHeaders"
              :action="uploadAction">
            <el-button type="primary">点击上传文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                {{ item.kongjsj }}
              </div>
            </template>
          </el-upload>
          <!--上传图片-->
          <!--          :on-remove="handleRemove(formData[item.zidmc])"-->
          <el-upload :class="{'no-upload':(this.menuName!='project2'&&this.menuName!='zuopxq')}"
                     :prop="item.zidmc"
                     :on-preview="handlePictureCardPreview"
                     :on-success="handleSuccess(formData[item.zidmc],'photo')"
                     multiple
                     :file-list="formData[item.zidmc]"
                     v-if="item.biaodkjlx == '5'"
                     :headers="uploadHeaders"
                     :action="uploadAction"
                     list-type="picture-card">
            <i class="el-icon" style="font-size: 20px;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                <path fill="currentColor"
                      d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"></path>
              </svg>
            </i>
          </el-upload>

          <el-radio
              :disabled="disabled"
              @change="radioChange"
              v-for="item2 in item.kongjsj.split(';')"
              :label="item2.split(',')[1]"
              v-if="item.biaodkjlx == '8'"
              v-model="formData[item.zidmc]">{{ item2.split(",")[0] }}
          </el-radio>

          <el-input
              :prop="item.zidmc"
              :disabled="disabled"
              :placeholder="`请输入${item.biaot}`"
              v-if="item.biaodkjlx == '1'"
              v-model="formData[item.zidmc]"
          ></el-input>

          <el-input
              :disabled="disabled"
              :placeholder="`请输入${item.biaot}`"
              type="textarea"
              v-if="item.biaodkjlx == '4'"
              v-model="formData[item.zidmc]"
          ></el-input>

          <el-select
              :disabled="disabled"
              :placeholder="`请选择${item.biaot}`"
              v-if="item.biaodkjlx == '2'"
              v-model="formData[item.zidmc]">
            <el-option
                v-for="item2 in item.kongjsj.split(';')"
                :label="item2.split(',')[0]"
                :value="item2.split(',')[1]">
            </el-option>
          </el-select>

          <!--级联-->
          <el-cascader
              :placeholder="`请选择${item.biaot}`"
              :disabled="disabled"
              v-if="item.biaodkjlx == '3'"
              :props="props"
              v-model="formData[item.zidmc]"
              :options="options[item.zidmc]"
          ></el-cascader>
          <div class="pos-rel" style="width:100%;">
            <div class="pos-abs disabled-top" v-if="disabled"></div>
            <circular-fields v-if="item.biaodkjlx == '10'"
                             :table-data="tableData"
                             :fields-data="tableFormHeader[item.zidmc]"></circular-fields>
          </div>
          <div :class="{'no-upload':(this.menuName!='project2'&&this.menuName!='zuopxq')}">
            <el-button @click="clickPdf"
                       v-if="item.biaodkjlx == '11'" type="primary">导出</el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import axios from "axios";
import circularFields from './circularFields.vue'
import formDataPdf from "@/view/pc/components/fomDataPdf.vue";

export default {
  name: "fomData",
  inject: ["imageUrl", "serviceUrl"],
  components: {
    formDataPdf,
    circularFields
  },
  props: {
    params: Object,
  },
  data() {
    return {
      pdfStatic:false,
      fieldsData: [
        {name: '项目名称', value: 'name', type: 'input'},
        {name: '项目类型', value: 'type', type: 'input', width: 140},
        {name: '项目面积', value: 'area', type: 'input', width: 100},
        {name: '项目所在地', value: 'local', type: 'input'},
        {
          name: '是否已选材',
          value: 'materials',
          type: 'radio',
          data: [{name: '是', value: 0}, {name: '否', value: 1}],
          width: 140
        },
        {name: '项目用灯需求', value: 'requirements', type: 'textarea'},
        {name: '操作', value: 'oper', width: 100}
      ],
      props: {
        expandTrigger: "click",
        value: "key",
        label: "title",
      },
      tableFormHeader: {},
      tableData: [{}],
      tableFormData: {},
      rules: {},
      options: {},
      showSecond: false,
      dialogImageUrl: null,
      dialogImageData: {},
      dialogVisible: false,
      dangqsf: 1,
      menuName: "",
      disabled: false,
      uploadAction: this.serviceUrl + "/sys/common/upload",
      uploadHeaders: {
        "X-Access-Token": localStorage.getItem("token"),
      },
      fileList: [],
      formData: {
        // pdf:[]
      },

      formDefine: [],
      allFormDefine:[],
      daqsc: null,
      saisId: null,
      pdfData: [],
    };
  },

  computed: {},

  mounted() {
  },

  methods: {
    clickPdf() {
      this.$emit('getPdf','')
    },
    handleDownLoadFile(uploadFile) {
      location.href = uploadFile.url;
    },
    handleSuccess($fileList, type) {
      let that = this
      return function (response, file, fileList) {
        if($fileList&&$fileList.length>0){
          $fileList.splice(0, $fileList.length);
          fileList.forEach(item => {
            $fileList.push({
              uid: item.uid,
              name: item.name,
              type: type,
              url: item.response ? that.imageUrl + item.response.message : item.url
              // url: item.response.message
            })
          })
        }
      };
    },
    getFormDefine(params, menu) {
      this.menuName = menu;
      if (menu == "pings") {
        this.disabled = true;
      }
      const dataparams = () => {
        this.formDefine.forEach(item => {
          if (item.biaodkjlx == '3') {
            this.options[item.zidmc] = []
            this.getOptionsData(item.zidbm, item.zidmc)
          }
          if (item.biaodkjlx == '10') {
            this.tableFormHeader[item.zidmc] = eval('(' + item.kongjsj + ')');
          }
          //初始化formData
          this.formData[item.zidmc] = (item.biaodkjlx == '9' || item.biaodkjlx == '6' || item.biaodkjlx == '5' || item.biaodkjlx == '10') ? [] : ''
          // this.formData['pdf'] = []
          //初始化rule 正则
          if (item.biaodyz == 'required') {
            this.rules[item.zidmc] = [
              {required: true, message: `"${item.biaot}"不能为空`, trigger: 'blur'},
            ]
          } else if (item.biaodyz != '' && item.biaodyz != null && item.biaodyz != 'required') {
            this.rules[item.zidmc] = [
              {required: true, message: `"${item.biaot}"不能为空`, trigger: 'blur'},
              {pattern: item.biaodyz, message: `"${item.biaot}"格式不对`, trigger: 'blur'}
            ]
          }
        })
      }

      axios
          .get(this.serviceUrl + "/saisjczd2/cbda2Saisjczd/getFormDefine", {
            headers: {
              "X-Access-Token": localStorage.getItem("token"),
            },
            params: {
              ...params,
              _t: new Date().getTime(),
            },
          }).then((resp) => {
            this.allFormDefine = resp.data.result;
            switch (menu) {
              case "project2":
                this.radioChange('1')
                dataparams()
                this.formData.canssf = '1' //参赛身份默认显示 个人
                break;
              case "zuopxq":
                this.radioChange(this.formData.canssf)

                this.formDefine.forEach(item => {
                  if (item.biaodkjlx == '3') {
                    this.getOptionsData(item.zidbm, item.zidmc)
                  }
                  if (item.biaodkjlx == '10') {
                    let data = eval('(' + item.kongjsj + ')')
                    this.tableFormHeader[item.zidmc] = data;
                    if (menu == 'pings') {
                      this.tableFormHeader[item.zidmc] = data.splice(0, data.length - 1)
                    }
                  }
                })
                this.showSecond = false;
                break;
              case "pings":
                this.showSecond = true;
                break;

            }
          })
          .catch((error) => {
            //console.log(error);
          });
      console.log(this.allFormDefine, "formData");
    },

    // 表单数据
    getFormData(params, menu) {
      axios
          .get(this.serviceUrl + "/saisjczd2/cbda2Saisjczd/getFormData", {
            headers: {
              "X-Access-Token": localStorage.getItem("token"),
            },
            params: {
              ...params,
              _t: new Date().getTime(),
            },
          })
          .then((resp) => {
            //所有视频图片 回显时变成数组
            let params = resp.data.result
            for (let key in params) {
              if (params[key] !== null && params[key] !== '') {
                if (JSON.stringify(params[key]).includes('[') && JSON.stringify(params[key]).includes(']')) {
                  params[key] = JSON.parse(params[key])
                }
              }
            }
            this.tableData = params.dangqzjxm;
            this.formData = params;
            this.$forceUpdate();
          })
          .catch((error) => {
            //console.log(error);
          });
    },

    radioChange(e) {
     this.formData.canssf = e
      if(e==1){
        this.formDefine = this.allFormDefine.filter(item=>item.cansrsf!=2)
      }
      if(e==2){
        this.formDefine = this.allFormDefine.filter(item=>item.cansrsf!=1)
      }
      console.log(this.formDefine,this.formData.canssf,'this.formData.canssf');
    },
    // 级联控件数据
    getOptionsData(zidbm, name) {
      console.log(zidbm, name);
      axios
          .get(this.serviceUrl + "/sys/category/loadTreeRoot", {
            headers: {
              "X-Access-Token": localStorage.getItem("token"),
            },
            params: {
              async: false,
              pcode: zidbm,
              _t: new Date().getTime(),
            },
          })
          .then((resp) => {
            this.options[name] = resp.data.result
            console.log(this.options);
          })

          .catch((error) => {
            //console.log(error);
          });

    },


    handleRemove($fileList) {
      console.log($fileList);
      return function (response, file, fileList) {
        fileList.forEach(item => {
          $fileList.push({
            uid: item.uid,
            name: item.name,
            // url: item.response ? this.imageUrl + item.response.message : item.url
            url: item.response.message
          })
        })
      }
    },
    handlePictureCardPreview(file, num) {
      this.dialogImageData = file
      console.log(file, 'file', num);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

  },
  // watch: {
  //   formDefine: {
  //     handler: function (newItems, oldItems) {
  //       console.log('新数组:', newItems);
  //       console.log('旧数组:', oldItems);
  //     },
  //     deep: true
  //   }
  // }
};
</script>

<style scoped lang="less">
:deep(.el-cascader) {
  width: 100%;
}
:deep(.el-upload-list){
  min-width:300px;
  font-size:16px;
}
:deep(.el-upload-list__item-file-name) {
  overflow: hidden;
  text-overflow: inherit;
  white-space: normal;
}

.no-upload {
  :deep(.el-upload--picture-card),
  :deep(.el-button),
  :deep(.el-form-item),
  :deep(.el-upload-list__item-delete) {
    display: none !important;
  }
}
.info{
  p{font-size:12px;color:#999;line-height:18px;}
}
</style>
